<template>
	<view class="contentHome">
		<!--头部-->
		<view class="header flex">
			<img class="logo" src="@/static/images/home/logo.jpg" />

			<img class="logoName" src="@/static/images/home/logoName.jpg" />
		</view>
		<!--查询-->
		<Search :newnum="indexdata.newnum" :tagList="indexdata.search" />
		<!--banner图片-->
		<view class="banner">
			<!-- <img src="@/static/images/delete/banner.jpg" /> -->
			<u-swiper height='100%' :list="indexdata.banner" keyName="image"></u-swiper>
			<!-- v-for="(item,index) in indexdata.banner" -->
		</view>
		<!--功能分区-->
		<div class="tag fwrap">
			<view @click="go(item)" class="tag-item fcc" v-for="(item, i) in indexdata.jingang" :key="i">
				<img :src="item.image" />{{ item.title }}
			</view>
		</div>
		<!--鉴定代工-->
		<IdentificationOEM :num="indexdata.jaindingnum" />
		<!--列表-->
		<GoodsList :classifyList="indexdata.goods_category" :goodslist="goodslist" @changecate="changecate"
			@tuijian="tuijians" @changesaixuan="changesaixuan" />

		<tabar :active='1' class="tabar" />
	</view>
</template>

<script>
	import GoodsList from "@/pages/components/GoodsList.vue";
	import Search from "@/pages/components/Search.vue";
	import IdentificationOEM from "@/pages/components/IdentificationOEM.vue";
	import tabar from "@/components/tabar.vue";
	export default {
		components: {
			IdentificationOEM,
			Search,
			GoodsList,
			tabar,
		},
		data() {
			return {
				list1: [],
				num: 0,
				tagList: [],
				indexdata: [],
				total: 0,
				goodslist: [],
				page: 1,
				zonghe: 0,
				xiaoliang: 0,
				price: 0,
				tuijian: 1,
				cid: 0,
				new: 0,
			};
		},
		onLoad() {},
		onReachBottom() {
			if (this.total > this.page) {
				this.page++;
				this.getlist();
			}
		},
		onShow() {
			this.page = 1;
			this.getlist();
			this.getindexdata();
		},
		methods: {
			tuijians() {
				this.tuijian = 1;
				this.cid = 0;
				this.page = 1;
				this.getlist();
			},
			changecate(e) {
				console.log(e);
				this.cid = e;
				this.tuijian = 0;
				this.page = 1;
				this.getlist();
			},
			changesaixuan(e) {
				this.zonghe = e[0] ? e[0] : 0;
				this.new = e[1] ? e[1] : 0;
				this.price = e[2] ? e[2] : 0;
				this.xiaoliang = e[3] ? e[3] : 0;
				this.page = 1;
				this.getlist();
			},
			getlist() {
				var that = this;
				this.$.ajax(
					1,
					"POST",
					"index/getgoodslist", {
						page: this.page,
						zonghe: this.zonghe,
						new: this.new,
						price: this.price,
						tuijian: this.tuijian,
						cid: this.cid,
						xiaoliang: this.xiaoliang,
					},
					(res) => {
						if (res.code == 1) {
							console.log(res.data.list);
							if (that.page == 1) {
								that.goodslist = [];
							}
							that.goodslist = [...res.data.list, ...that.goodslist];
						}
					}
				);
			},
			getindexdata() {
				this.$.ajax(1, "POST", "index/getindex", {
					type: 0
				}, (res) => {
					if (res.code == 1) {
						this.indexdata = res.data;
					}
				});
			},
			go(item) {
				if(item.jump_type == 1){
					uni.switchTab({
						url:item.jump_url
					})
					uni.setStorageSync("getjump", item.ids)
				}else{
					uni.navigateTo({
						url:item.jump_url
					})
				}
				// uni.navigateTo({url:'/pages/marketInformation/index'})
				// uni.navigateTo({
				// 	url: i < 5 ? "/pages/marketInformation/index" : "/pages/marketHall/index",
				// });
			},
		},
	};
</script>

<style lang="scss" scoped>
	.contentHome {
		background-image: url("@/static/images/home/bg.jpg");
		background-repeat: no-repeat;
		background-size: 100% auto;

		background-color: #fff;
		padding: 20rpx;

		.header {
			padding-top: 100rpx;
			gap: 30rpx;
			margin-bottom: 40rpx;

			.logo {
				width: 48rpx;
				height: 48rpx;
			}

			.logoName {
				width: 78rpx;
				height: 40rpx;
			}
		}

		.banner {
			img {
				width: 100%;
				height: 100%;
			}

			height: 200rpx;
			margin: 20rpx 0;
		}

		.tag {
			.tag-item {
				flex-direction: column;
				flex: 1;
				font-size: 22rpx;
				color: #131313;
				margin: 10rpx 0;
				width: calc((100% - 10rpx) / 5); // 这里的10px = (分布个数3-1)*间隙5px, 可以根据实际的分布个数和间隙区调整
				min-width: calc((100% - 10rpx) / 5); // 加入min-width、max-width后每个child的宽度就生效了
				max-width: calc((100% - 10rpx) / 5);

				img {
					width: 80rpx;
					height: 80rpx;
				}
			}
		}
	}

	.tabar {
		width: 100%;
		height: 160rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9999;
	}
</style>